import {
    IosArrowRtl24Regular,
    Delete28Filled,
  } from "@vicons/fluent";
  import { NButton, NCard, NIcon } from "naive-ui";
  import { PropType } from "vue";
  import { flowNodeTheme, delDesignNode } from "@/hooks/useWflow";
  import { DesignNode } from "@/types/index";
  import CAddFlowNodeBtn from "./CAddFlowNodeBtn";
  import "./style.css";
  interface Props {
    nodeItem: DesignNode;
  }
  export default defineComponent({
    name: "DesignNode",
    props: {
      nodeItem: {
        type: Object as PropType<Props["nodeItem"]>,
      },
    },
    setup(props) {
      let { nodeItem } = props;
      const handleDelDesignNode = () => {
        delDesignNode(nodeItem?.id as string);
      };
      return () => (
        <div class="node-wrap border-x-inherit cursor-pointer relative flex">
          <NCard
            contentStyle={{
              padding: 0,
            }}
          >
            <div class="flow-node w-52 p-3">
              <div
                class="flow-node-cd absolute right-0 z-10"
                style={{
                  top: "-26px",
                }}
              >
                <NButton
                  size="tiny"
                  onClick={handleDelDesignNode}
                  secondary
                  type="primary"
                >
                  <NIcon size={15} component={Delete28Filled} />
                </NButton>
              </div>
              <div class="head box-border text-base font-bold flex items-center">
                <NIcon
                  size={25}
                  color={flowNodeTheme[nodeItem?.type as string][1]}
                  component={flowNodeTheme[nodeItem?.type as string][0]}
                />
                <span class="ml-1">{nodeItem?.name}</span>
              </div>
              <div class="center box-border mt-2">
                <NButton
                  strong
                  secondary
                  block
                  type="tertiary"
                  iconPlacement="right"
                  style={{
                    justifyContent: "space-between",
                  }}
                >
                  {{
                    icon: () => {
                      return <NIcon component={IosArrowRtl24Regular} />;
                    },
                    default: () => "请选择",
                  }}
                </NButton>
              </div>
            </div>
          </NCard>
          <CAddFlowNodeBtn nodeItem={nodeItem} />
        </div>
      );
    },
  });
  